<template>
  <div class="iconWrap">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for ="(page, index) of pages" :key="index">
        <div class="icon"
             v-for="item in page"
             :key="item.id">
          <div class="iconImage">
            <img class="iconImageContent" :src="item.iconSrc">
          </div>
          <div class="desc">{{item.desc}}</div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'homeIcons',
  data: function () {
    return {
      swiperOption: {
        pagination: 'swiper-pagination'
      },
      iconList: [{
        id: '001', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '贵州省狼牙山风景区'
      }, {
        id: '002', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '岳麓山'
      }, {
        id: '003', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '岳麓山'
      }, {
        id: '004', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '泸沽湖'
      }, {
        id: '005', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '泸沽湖'
      }, {
        id: '006', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '岳麓山'
      }, {
        id: '007', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '太行山'
      }, {
        id: '008', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '岳麓山'
      }, {
        id: '009', iconSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png', desc: '泸沽湖'
      }
      ]
    }
  },
  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .iconWrap
    height 0
    padding-bottom 50%
    overflow hidden
    background #ffffff
    .icon
      width 25%
      height 0
      padding-bottom 25%
      float left
      position relative
      background aliceblue
      .iconImage
        box-sizing border-box
        padding 0 0.3rem
        .iconImageContent
          width 100%
          height auto
      .desc
        padding 0 0.1rem
        text-align center
        ellipsis()
</style>
